box-sizing這個語法可以讓設計師或是寫程式的人不用去加加減減的計算區塊
(比如說線條寬度或是padding之類)
直接限定一個最外圍的像素，在由這個像素往內做調整

這個語法是屬於CSS3的語法，算是近幾年來比較新的功能，所以對於一些比較舊版的瀏覽器可能多少會有一點相容性問題，這時候可以使用 Can I use 這個網站去查詢支援的瀏覽器。

那以下我們就做個有使用box-sizing與沒使用的對照

/*沒有使用box-sizing*/
.box-sizing-off{
	text-align: center;
	line-height: 200px;
	height: 200px;
	width: 200px;
	border: 10px solid blue;
}


/*有使用box-sizing*/
.box-sizing-on{
	box-sizing: border-box;
	text-align: center;
	line-height: 180px;
	height: 200px;
	width: 200px;
    border: 10px solid red;
}

一般來說在沒使用的情形之下，以上面為例子來說就是白色部分的寬高皆為200px，再加上border線條寬度是10px，所以第一個沒使用box-sizing的總像素寬高就都會變成原本的200px+線條一邊10px*2=220px。

但是在使用了box-sizing之後，因為限制外圍寬高為200px，所以線條寬度會往內移，此時內部沒填色的部分寬高皆為180px，加上線條一邊10px*2=200px